<template>
  <div class="city-page" style="">
<!--    <span @click="sendCity(item)" class="">{{item.cname}}</span>-->
    <div class="cityarea" >
      <div class="city-item" >
       <label>当前城市</label>
        <div class="city-address choosed-row"  @click="sendCity2()">
          <span><i class="el-icon-map-location"></i>全国</span>
        </div>
      </div>

      <div class="city-item " v-for="(item1,idx) in areaArr" :key="idx">
        <div class="city-item_title"><label>{{ item1.cname }}</label></div>
        <div class="city-address row"  v-for="(item,idx2) in hotcity" :key="idx2" @click="sendCity(item)">
<!--          <p>深圳</p><p>深圳2</p>-->
                    <p class="city-item_p" v-if="item1.id == item.areaId">{{ item.cname }} </p>
<!--          <span class="city-item_p" v-if="item1.id == item.areaId">{{ item.cname }} </span>-->
        </div>

<!--        <div class="city-address row" >-->
<!--          <p  v-for="(item,idx2) in hotcity" :key="idx2" @click="sendCity(item)"-->
<!--             class="city-item_p">-->
<!--             <span v-if="item1.id == item.areaId">{{ item.cname }}</span>-->
<!--          </p>-->
<!--        </div>-->

      </div>

    </div>
  </div>
</template>

<script>
/*eslint-disable */
import cityDate from '@/assets/json/city.json'
export default {
  name: 'get-city',
  data () {
    return {
        hotcity: [],
        areaArr: [
          // {id:0,cname:'当前城市',flag:'',area:''},
          {id:1,cname:'热门城市',flag:'',area:''},
          {id:2,cname:'更多城市',flag:'',area:''},
          {id:3,cname:'华南区域',flag:'',area:''},
          {id:4,cname:'华西区域',flag:'',area:''},
          {id:5,cname:'华东区域',flag:'',area:''},
          {id:6,cname:'华北区域',flag:'',area:''},
          {id:7,cname:'华中区域',flag:'',area:''},
        ],
      areaCoutry: {"id":14,"cname":"全国","areaId":2},
    }
  },
  created () {
    // this.init()
    // this.$http.get('@/assets/json/city.json').then( res =>{
    //   console.log('city: ',res)
    // })
  },
  mounted () {
    this.hotcity= cityDate
    // console.log(this.hotcity)
  },
  methods: {
    getText() {
      console.log('txt: ')
      let txt = this.$refs.menuIten.innerHTML;
      // if (txt =='全国'){
        console.log(txt)
      // }
    },
    sendCity(item) {
      // alert(item)
      this.$emit('change',item)
    },
    sendCity2() {
      this.hotcity.forEach(res=>{
        if(res.id==14){
          // console.log(res)
          this.$emit('change',res)
        }
      })
    }
  }
}
</script>

<style scoped>

.cityarea{
  box-sizing: border-box;
  /*width: inherit;*/
  width: 650px;
}
.cityarea *{
  margin: 0;
  padding: 0;
  /*min-width: 680px;*/
  /*border: #1c3d79 1px solid;*/
}

.cityarea .city-item{
  display: flex;
  margin: 10px 0;
  width: 600px;
  /*box-sizing: border-box;*/
  /*border: 1px solid #333333;*/
}
.cityarea .city-item_title{
 min-width: 65px;
}
.city-item .choosed-row span {
  color: #6aa2e4;
  cursor: pointer;
  padding-left: 10px;
}

.city-item label{
  color: #A0A0A2;
  margin-right: 8px;
  /*width: 60px;*/
}
.city-address{
  /*border: 1px solid #333333;*/
  /*display: flex;*/
  /*flex-wrap: wrap;*/
  /*box-sizing: border-box;*/
}
.city-item .row{
  /*display: flex;*/
  /*flex-wrap: wrap;*/
  /*border: 1px solid #333;*/
  align-items: start;
}

.city-item_p {
  cursor: pointer;
  padding: 0 6px;
  /*text-align: center;*/
  /*width: 42px;*/
  /*margin-bottom: 6px;*/
}
.city-item .choosed-row span:hover,
.city-item_p:hover{
  color: #fff;
  background-color: #6aa2e4;
  text-decoration:none;
}
</style>
